<template>
  <div class="upload-file-input" :class="props.disabled?'disabled_upload' : ''" @click="uploadFileInput">
    <div class="title">
      <div class="placeholder" v-if="!inputValue">请上传</div>
      <div class="have-value" v-else>{{ title }}.{{ inputValue.split('.')[inputValue.split('.').length - 1] }}</div>
    </div>
    <el-icon color="#c1c4cb" v-if="!inputValue">
      <UploadFilled />
    </el-icon>
    <el-icon v-else color="#c1c4cb" @click.stop="deleteFile">
      <CircleCloseFilled />
    </el-icon>
  </div>
</template>
  
<script lang="ts" setup>
import { UploadFilled, CircleCloseFilled } from '@element-plus/icons-vue'
import { ref, watch, computed, inject, defineAsyncComponent } from "vue";
const emits = defineEmits(['change'])
const $DialogBox: any = inject('$DialogBox')
const $utils: any = inject('$utils')
const $MessageBox: any = inject('$MessageBox')
const uploadFile = defineAsyncComponent(() =>
  import('@/components/funcUnit/uploadFile.vue')
)
let filePath = ref('');
/** 下载文件 */
const downloadFile = (pathToken: any) => {
  if (pathToken) {
    $utils
      .downloadImageOss({ filePath: pathToken })
      .then((result: any) => {
        filePath.value = result.fileUrl;
      })
      .catch((error: any) => {
        $MessageBox.alert({ txt: "影像获取错误！", type: 'danger' }).then(() => { }).catch(() => { })
      });
  }
}

interface Props {
  value: string | null;
  fileSize: string | number;
  title: string;
  disabled: boolean;
  isPDF: boolean;
  isPDFandPIC: boolean;
  lookUrl: string;
  isRelationNo: string | null;
}

const props = withDefaults(defineProps<Props>(), {
  value: null,
  fileSize: 10,//限制大小
  title: '上传文件',//标题
  disabled: false,//是否禁用
  isPDF: false,//是否只能上传pdf
  isPDFandPIC: false,//是否只能上传pdf和图片
  lookUrl: '',//预览比较值
  isRelationNo: null,//商户入网的图片一个商户在同一个路径下
});
const inputValue = ref(props.value);
watch(
  () => props.value,
  (newValue) => {
    inputValue.value = newValue;
    downloadFile(inputValue.value)
  },
  { immediate: true, deep: true },
);
const uploadFileInput = () => {
  if(inputValue.value) {
    openFile();
    return;
  }
  if (props.disabled) {
    return
  }
  const uploadPath = props.isRelationNo ? `upload?path=/merchant/mcht/${props.isRelationNo}` : 'upload?path=/merchant/mcht'
  $DialogBox({
    title: props.title,
    compontent: uploadFile,
    params: {
      value: inputValue,
      upload: uploadPath,
      fileSize: props.fileSize,
      title: props.title,
      disabled: props.disabled,
      isPDF: props.isPDF,
      isPDFandPIC: props.isPDFandPIC,
      lookUrl: props.lookUrl,
      isRelationNo: props.isRelationNo,
    },
  }).then((res: any) => {
    inputValue.value = res.file;
    emits('change', { file: inputValue });
    console.log('对话框then-', res)
  }).catch((err: any) => {
    console.log('对话框catch-', err)
  })
}
const openFile = () => {
  window.open(filePath.value, '_blank')
}
const deleteFile = () => {
  inputValue.value = null;
  emits('change', { file: inputValue });
}
</script>
  
<style lang="scss" scoped>
.upload-file-input {
  cursor: pointer;
  height: 32px;
  line-height: 32px;
  border: 1px solid var(--el-border-color);
  text-align: left;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;

  .placeholder {
    color: var(--text-black-45);
  }

  .have-value {
    color: var(--assist-blue);
  }
}

.disabled_upload {
  background-color: var(--el-disabled-bg-color);
  cursor: not-allowed;
}
</style>